﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <script type="text/javascript" src="/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/h-ui.admin/css/style.css" />
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    <script src="/lib/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
<!--    <script>DD_belatedPNG.fix('*');</script>-->

</head>
<body>

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 新手引导 <span
        class="c-gray en">&gt;</span> 商品列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                               href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="text-c">
        <p style="padding-left: -50px"  align="left">选择商品</p>
        <input type="text" class="input-text" style="width:250px;" placeholder="输入编号、名称、规格、属性" id="poKeyword" name="poKeyword">
        <button type="button" class="btn btn-success" id="findempl" name=""><i class="Hui-iconfont">&#xe665;</i>搜索</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">

      </div>
      <div><span>所属分类:</span><span style="color: #0e90d2"> 商品分类></span><span style="color: #9a6a00">默认分类</span></div>
    <hr>
    <div id="app" style="overflow: scroll;height: 500px"  >
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr>
                <th scope="col" colspan="9">商品列表</th>
            </tr>
            <tr class="text-c">
                <th width="25"><input type="checkbox" id="check" name="" value=""></th>
                <th width="40">序号</th>
                <th width="130">数量</th>
                <th width="150">编号</th>
                <th width="90">名称</th>

                <th width="100">零售价(元)</th>
                <th width="100">属性</th>
                <th width="100">规格</th>
            </tr>
            </thead>
            <tbody>
            <tr class="text-c" v-for="(item,index) in result">
                <td><input type="checkbox" :value=index  name="aid"></td>
                <td >{{index+1}}</td>
                <td style="display: none" class="clid">{{item.id}}</td>
                <td>
                    <button class="layui-btn" style="width:15px; height: 24px" @click="jia(index)">+</button>
                    <input type="text" class="input-text" style="width:40px; height: 24px" id="commdiNumber" name="" value="0">
                    <button class="layui-btn" style="width:15px; height: 24px" @click="jian(index)">-</button>
                </td>
                <td class="clNumber" >{{item.clNumber}}</td>
                <td class="clName">{{item.clName}}</td>
                <td class="clTagPrise">{{item.clTagPrise}}</td>
                <td class="clSpec">{{item.clSpec}}</td>
                <td class="prId">{{item.prId}}</td>
            </tr>
            </tbody>
        </table>
        <div><button class="layui-btn" style="margin-top: 60px;margin-left:450px " onclick="tijiao()">提交</button>
          </div>

    </div>

    <div id="pagenav" style="text-align:center;position: fixed;left: 0px;bottom :50px;width: 100%;height: 50px"></div>
</div>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el : '#app',
        data : {
            result : []
        }
    });
    //查询商品数据
    var getCommdityPageList = function(curr) {
            $.ajax({
                type : "POST",
                dataType : "json",
                url : "/basicdata/commodity-list/getpage",
                data : {
                    current:curr || 1,
                    size:6
                },
                success : function(msg) {
                    $("#strong").html(msg.total);
                    app.result=msg.comlist;
                    laypage({
                        cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                        pages : msg.pages, //总页数
                        first : '首页',
                        last : '尾页',
                        curr : curr || 1, //当前页
                        jump : function(obj, first) { //触发分页后的回调
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                getCommdityPageList(obj.curr);
                            }
                        }
                    });
                }
            });
        }
    getCommdityPageList();

   /*模糊查询*/
    $("#findempl").click(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: "/basicdata/commodity-list/vaguelist",
            data: {
                poKeyword: $("#poKeyword").val()
            },
            success: function (dd) {
                app.result = dd.data;
            }
        });
    });


   $("#checkCommdi").click(function () {
            $.ajax({
                type:'POST',
                dataType:'json',
                url:"/activitymanagement/commodi-tytemplate/aa",
                contentType: "application/json",
                data: JSON.stringify($("#clNumber").val(), $("#commdiNumber").val),
                success:function (aa) {
                    alert(aa);

                }
            });
        }

    )

    /**
     * 对选择的商品进行增加操作
     * @param obj
     */
    function jia(obj) {
        var txt =document.getElementsByClassName("input-text");
        var val =txt[obj+1].value;
        val++;
        txt[obj+1].value=val;
    }

    /**
     * 对选择的数据进行减少操作
     * @param obj
     */
    function  jian(obj) {
        var txt=document.getElementsByClassName("input-text");
        var val =txt[obj+1].value;
        val--;
        if (val<=1){
            val=0;
        }
        txt[obj+1].value=val;
    }
    
    function  tijiao() {

        var clid =new Array();
        $(".clid").each(function(i) {
            clid[i] =$(this).text() ;
        })

        var clName =new Array();
        $(".clName").each(function(i) {
           clName[i] =$(this).text() ;
        })

        var clNumber =new Array();
        $(".clNumber").each(function(i) {
            clNumber[i] =$(this).text() ;
        })
        var clSpec =new Array();
        $(".clSpec").each(function(i) {
            clSpec[i] =$(this).text() ;
        })
        var clTagPrise =new Array();
        $(".clTagPrise").each(function(i) {
            clTagPrise[i] =$(this).text() ;
        })
        var commdiNumber=new Array();
        $(".input-text").each(function(i) {
            commdiNumber[i] =$(this).val();
        })


        var check = new Array();
        check = $('input[name=aid]:checked');
        var sid =new Array()
        for (var i =0;i<check.length;i++){
                var s=check[i].value;
                alert(s);
                var d =i+1;
                var sd =parent.$("#shuju");
                parent.$("#index").append(new Option(d));
                parent.$("#sid").val(clid[s]);
                parent.$("#sid").append( $("<option value='"+i+"' id='sid'>"+clid[s]+",</option>"))
                parent.$("#shopname").append( $("<option value='"+i+"'>"+clName[s]+",</option>"))
                parent.$("#shopnuber").append($("<option value='"+i+"'>"+clNumber[s]+",</option>"))
                parent.$("#shopguige").append($("<option value='"+i+"'>"+clSpec[s]+",</option>"))
                parent.$("#shopsize").append($("<option value='"+i+"'>"+commdiNumber[d]+",</option>"))
                parent.$("#shopjiage").append($("<option value='"+i+"'>"+clTagPrise[s]+",</option>"))

                sd.append("<tr><td class='id' hidden='hidden' >"+clid[s]+"</td>  <td>"+d+"</td><td style='text-align: center'>  <button class=\"layui-btn layui-btn-danger layui-btn-sm\" ><i class=\"layui-icon\"></i></button></td><td id='names'>"+clName[s]+"</td><td>"+clNumber[s]+"</td><td>"+clSpec[s]+"</td><td><input value="+commdiNumber[d]+"></td><td>"+clTagPrise[s]+"</td></tr>");
        }

        var index = parent.layer.getFrameIndex(window.name);

        parent.layer.close(index);

    }


</script>
</body>
</html>